//  Animated的向右下角移动图片
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    Animated,
    Easing,
    TouchableOpacity,
    LayoutAnimation,
    TouchableHighlight,
    ToastAndroid,
    Platform,
    UIManager
} from 'react-native';

export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            //fadeOutOpacity: new Animated.Value(0), // 只设置一个值的操作
            translateValue: new Animated.ValueXY({x:0, y:0}), // 二维坐标
            rotateValue:new Animated.Value(0),
        };
    }

    componentDidMount() {
        this.startAnimation();
    }

    startAnimation() {
        this.state.translateValue.setValue({x:20, y:20});
        Animated.decay( // 以一个初始速度开始并且逐渐减慢停止。  S=vt-（at^2）/2   v=v- at
            this.state.translateValue,
            {
                velocity: 4, // 起始速度，必填参数。
                deceleration: 0.8, // 速度衰减比例，默认为0.997。
            }
        ).start();
    }

    render() {
        return (
            <Animated.View // 可选的基本组件类型: Image, Text, View(可以包裹任意子View)
                style = {[styles.container,{
                  transform: [
                    {translateX: this.state.translateValue.x}, // x轴移动
                    {translateY: this.state.translateValue.y}, // y轴移动
                  ]
                  }]}
            >
                <Image source = {{uri: 'http://i.imgur.com/XMKOH81.jpg'}}
                       style = {{width: 100,height: 100}}/>
            </Animated.View >
        );
    }


}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
});